<template>
  <div class="chart-wrapper" ref="funnelChart"></div>
</template>

<script setup>
import echarts from 'echarts'
import {
  onMounted,
  onBeforeUnmount,
  ref,
  watch,
  computed
} from 'vue'
import { debounce } from '@/utils/index.js'

// export default {
// setup() {
const funnelChart = ref(null)
let myChart = ref(null)
const props = defineProps({
  escalationForm: {
    type: Array,
    default: []
  }
})
const escalationForm1 = computed({
  get: () => props.escalationForm,
  set: (val) => {}
})

watch(
  escalationForm1,
  () => {
    console.log('触发侦听', escalationForm1.value)
    if (escalationForm1.value.length > 0) {
      notRectified.value[0] = escalationForm1.value.map((item) => {
        return item.rq
      })
      notRectified.value[1] = escalationForm1.value.map((item) => {
        return item.wzg
      })
      notRectified.value[2] = escalationForm1.value.map((item) => {
        return item.yzg
      })
      initEcharts()
    }
  },
  // 设置 immediate 选项
  {
    immediate: true
  }
)

const resizeHandler = debounce(() => {
  if (myChart) {
    myChart.resize()
  }
}, 200)
const notRectified = ref([])
onMounted(() => {
  // getBoxData()
  window.addEventListener('resize', resizeHandler)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeHandler)
})

// //模拟接口,获取echarts数据
// const getBoxData = async () => {
//   // const { data } = await selectBoxChartData({
//   //   abcode,
//   //   year,
//   // });

//   initEcharts()
// }

//渲染echarts图
const initEcharts = () => {
  myChart = echarts.init(funnelChart.value)
  myChart.setOption(
    {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '8%',
        top: '15%',
        containLabel: true
      },
      legend: {
        top: '3%',
        left: 'right',
        data: ['未整改', '已整改']
      },
      xAxis: [
        {
          type: 'category',
          data: notRectified.value[0],
          axisTick: {
            alignWithLabel: true
          },
          axisLine: {
            lineStyle: {
              type: 'dashed' // 设置为虚线
            }
          },
          axisLabel: {
            rotate: -45,
            interval: 0 // 设置 X 轴标签显示所有日期
            // formatter: function (value) {
            //   return value.substring(5) // 自定义 X 轴时间格式
            // }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          splitLine: { lineStyle: { type: 'dashed', color: '#ccc' } },
          axisLine: {
            lineStyle: {
              type: 'dashed' // 设置为虚线
            }
          }
        }
      ],
      series: [
        {
          name: '未整改',
          type: 'bar',
          barWidth: '40%',
          data: notRectified.value[1],
          itemStyle: {
            normal: {
              color: '#E4EDFC'
            }
          }
        },
        {
          name: '已整改',
          type: 'bar',
          barWidth: '40%',
          data: notRectified.value[2],
          itemStyle: {
            normal: {
              color: '#2385FF'
            }
          }
        }
      ]
    },
    true
  )

  // myChart.off("click");
  // myChart.on("click", () => {
  //   routerChange("/more");
  // });
}

// return {
//   funnelChart
// }
// }
// }
</script>
